<template>
  <div class="Vector">
    <div class="content">
      <div class="demo-input-suffix">
        <div class="searchBar">
          <span style="margin-left: 10px">请选择要素类别</span>
          <el-select v-model="yaosuType" placeholder="请选择要素类别" @change="selectshi">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

          <span class="margin_left">行政单元</span>
          <el-select size="medium" v-model="requestParams.division" placeholder="请选择行政单元" @change="selectshi" @clear="selectshi" clearable >
            <el-option v-for="(itme,index) in theOptions"  v-if="itme.isShow "   v-bind:key="index" :label="itme.name" v-bind:value="itme.name"></el-option>
          </el-select>
          <span style="margin-left: 10px">环境管控单元编号</span>
          <el-input
            size="medium"
            v-model="requestParams.code"
            width="100">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-button type="goon" round  @click="findTextDataByKeys"
                     size="medium"  icon="el-icon-search">
            查找
          </el-button>
          <el-button type="goon" round  @click="resetRequestParams"
                     size="medium"  icon="el-icon-refresh">
            重置
          </el-button>
        </div>

      </div>
      <div id="vectortable">
        <template>
          <el-table
            :data="theTextDataInfo"
            border
            :stripe="true"
            style="width: 100%"
            height="100%"
           >
            <el-table-column
              fixed
              type="index"
              label="序号"
              width="50">
              <template v-slot="scope">
                {{ (requestParams.pageNumber-1) * requestParams.pageSize+ scope.$index + 1}}
              </template>
            </el-table-column>
            <el-table-column
              prop="code"
              label="环境要素编码"
              width="145">
            </el-table-column>
            <el-table-column
              prop="name"
              label="环境要素名称"
              width="158">
            </el-table-column>
            <el-table-column
              prop="province"
              label="自治区/兵团"
              width="140">
            </el-table-column>
            <el-table-column
              prop="division"
              label="地州/师"
              width="70">
            </el-table-column>
            <el-table-column
              prop="regiment"
              label="县市/团"
              width="70">
            </el-table-column>
            <el-table-column
              prop="unitClassify"
              label="管控区分类"
              width="100">
            </el-table-column>
            <el-table-column
              prop="detailFeatures"
              label="要素细类"
              width="120">
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="spaceRestrain"
              label="空间布局约束"
              width="180">
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="pollutantRestrain"
              label="污染物排放管控"
              width="180">
            </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="environmentRestrain"
                label="环境风险防控"
                width="180">
            </el-table-column>
              <el-table-column
                fixed="right"
                :show-overflow-tooltip="true"
                label="资源开发效率要求"
                >
              </el-table-column>
          </el-table>
        </template>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="requestParams.pageNumber"
            :page-sizes="[15,20,30,50]"
            :page-size="requestParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total=theTextDataInfoTotal>
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "TheYaosu",
    data() {
      return {
        requestParams:{
          pageNumber:1,
          pageSize:15,
          code:'',
          division:window.sessionStorage.getItem("shiName"),
        },
        theTextDataInfo:[],
        theTextDataInfoTotal:15,
        yaosuType:'ecologicalSpaceRule',
        typeOptions:[{
          value: 'ecologicalSpaceRule',
          label: '生态空间分区'
        },{
          value: 'environmentWaterRule',
          label: '水环境管控分区'
        },{
          value: 'atmosphereRule',
          label: '大气环境管控分区'
        },{
          value: 'environmentResourceRule',
          label: '自然资源管控分区'
        },],
        theOptions:[],
      };

    },

    created(){
      this.selectshi()
      this.getShiji();
    },
    mounted() {

    },
    methods: {
      async getShengtai(){
        const {data:result}= await this.$http.get('/v1.0/resultIntegration/rule/'+this.yaosuType+'/findPages?pageNumber='+this.requestParams.pageNumber+'&pageSize='+this.requestParams.pageSize)
        if(result.status=='3000'){
         this.theTextDataInfo=result.data.result;
         this.theTextDataInfoTotal=result.data.totalCount;
        }
      },
      async selectshi(){
        if(this.requestParams.division=='新疆生产建设兵团'){
          this.getShengtai();
        }else {
          const {data:result}= await this.$http.get('/v1.0/resultIntegration/rule/'+this.yaosuType+'/findPages?pageNumber='+this.requestParams.pageNumber+'&pageSize='+this.requestParams.pageSize+'&division='+this.requestParams.division)
          if(result.status=='3000'){
            this.theTextDataInfo=result.data.result;
            this.theTextDataInfoTotal=result.data.totalCount;
          }else {
            this.theTextDataInfo=[]
            this.$message.error('查询失败!'+result.message)
          }
        }
      },
      async getShiji(){
        const {data:res}=await  this.$http3.get('/v1.0/unit/find/city/findAllByDivision')
        this.theOptions=res.data;
      },
      async findTextDataByKeys(){
        const {data:result}= await this.$http.get('/v1.0/resultIntegration/rule/'+this.yaosuType+'/findPages?pageNumber='+this.requestParams.pageNumber+'&pageSize='+this.requestParams.pageSize+'&code='+this.requestParams.code+'&division='+this.requestParams.division)
        if(result.status=='3000'){
          this.theTextDataInfo=result.data.result;
          this.theTextDataInfoTotal=result.data.totalCount;
        }else {
          this.theTextDataInfo=[]
          this.$message.error('查询失败!'+result.message)
        }
      },
      resetRequestParams(){
        this.requestParams.code='';
        this.requestParams.division=window.sessionStorage.getItem("shiName");
        this.selectshi();
      },
      handleSizeChange(newSize){
        this.requestParams.pageSize=newSize;
        this.selectshi()
      },
      handleCurrentChange(newPage){
        this.requestParams.pageNumber=newPage;
        this.selectshi()
      },
    }
  }
</script>

<style scoped lang="scss">
::v-deep .el-link.el-link--info:hover{
    color: #fff;
}
::v-deep .el-link.el-link--info{
    color: #606266
}
  .block{
    /*position: absolute;*/
    /*top: 90%;*/
    //padding-top: 10px;
  }
  ::v-deep .el-table td{
    padding: 12px 0 ;
  }
  .Vector{
    position: absolute;
    left: 15.5%;
    //height: 87%;
    top: 9.5%;
    bottom: 1.5%;
    width: 83.5%;
    /*background-color: #ffffff;*/
    border-radius: 8px;
  }
  .dir{
    position: absolute;
    width: 25%;
    height:100%;
    background-color: white;
    border-left:2px #E9EEF3 solid ;
    /*overflow: auto;*/
    border-radius: 8px;
    box-shadow: 0 0 5px #acc4fe;
  }
  .searchBar{
  ::v-deep .el-input__inner{
    border-radius: 45px;
  }
  }

  .content{
    //left:25.5%;
    position: absolute;
    height: 100%;
    width:100%;
    overflow: auto;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 5px #acc4fe;
  }
  .broad{
    position: absolute;
    width: 98%;
    display: inline-block;
    padding: 1%;
    color: black;
    font-size: 20px;
    border-bottom: 2px solid #e9eef3;
    background-color: #ffffff;
    border-radius: 8px 8px 0 0 ;
  }
  ::v-deep .el-breadcrumb{
    font-size: 16px;
    font-family: sans-serif;
  }
  #vectortable{
    position: absolute;
    top: 60px;
    width: 98%;
    padding: 1%;
    height: calc(100% - 13%);
  }
  .el-input{
    width: 15%!important;
  }
  .demo-input-suffix{
    position: absolute;
    top: 10px;
    background-color: #ffffff;
    padding: 10px;

  }
  #datamove{
    display: inline-block;
  }
  .searchBar{
    display: inline-block;
    //margin-left: 80px;
    ::v-deep .el-button:focus, .el-button:hover {
      color: #fff;
      border-color: #c6e2ff;
      background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
    }
    ::v-deep .el-button--goon:active {
      color: #fff;
      border-color: #c6e2ff;
      outline: 0;
    }
  }
  .searchBar > span{
    padding: 10px;
    font-size: 14px;
  }
  .margin_left{
    margin-left: 20px;
  }
  .el-button{
    margin-left: 20px;
    font-size: 14px!important;
  }
  ::v-deep .cell{
    text-align: center;
  }
  ::v-deep .el-table__empty-text{
    line-height:44px
  }
  ::v-deep .el-table__empty-block{
    min-height: 44px;
  }

  ::v-deep .el-table__body-wrapper {
    /*height: 200px; !* 滚动条整体高 必须项 *!*/
    border-right: none;
    overflow-y: scroll;/* overflow-y为了不出现水平滚动条*/
  }
  ::v-deep .el-dialog--center .el-dialog__body{
    padding: 10px;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width:6px;/* 滚动条的宽高 必须项 */
    height: 5px;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #bfcbd9;/* 滚动条的宽 */
    border-radius: 3px;
  }
::v-deep .cell{
    max-height: 150px;
    overflow-y: auto;
  }
::v-deep .cell::-webkit-scrollbar {
  width:6px;/* 滚动条的宽高 必须项 */
}
::v-deep .cell::-webkit-scrollbar-thumb {
  background-color: #bfcbd9;/* 滚动条的宽 */
  border-radius: 3px;
}

</style>
